<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="shadow"></div>
</body>
<script>

    // 面向对象 -> 将需求抽象成一个对象,然后针对这个对象 分析它的特征和行为

    // 元素拖拽   => 鼠标拖拽元素移动
    // 1. 先按下 => 选中该元素   => 开始拖拽
    // 2. 再移动 => 元素跟随鼠标移动  => 拖拽移动
    // 3. 再松开 => 元素不在跟随鼠标移动 => 停止拖拽



    // 最简单的面向对象 -> 字面量对象 -> 把面向过程中的变量和函数封装到对象中 => 作为对象的属性和方法

    // 问题1:   posX和posY -> 变量跨作用域使用 
    // a. 把变量提取到 两个作用域都能访问的位置(全局) => 缺点: 1. 全局变量增多  2. 提取的变量和面向的对象 关联性不大
    // b. 两个函数 都被 对象包裹着 -> 可将数据提取到对象中存储 

    // 问题2:
    // this是函数的内置参数,每个函数都有 => 如果有多个函数相互嵌套 -> this指向混乱的问题(内存作用域访问外层作用域this指向)
    // (1) 在父作用域中,通过中间变量提前存储this指向
    //  var  _this = this;  
    //  var that = this; 

    // (2) 改变内层函数的this指向 -> 将内层函数的this指向 外层函数(this指向)




    var dragEle = {
        target: document.getElementsByClassName("shadow")[0],
        // maxLeft: null,
        // maxTop: null,
        dragStart: function () {
            // 开始拖拽  => 给目标元素绑定mousedown事件 -> 记录按下的位置
            // this -> dragEle(字面量对象)


            // 箭头函数没有自己的this指向 -> 依赖于父作用域this指向
            this.target.onmousedown = () => {
                var e = e || window.event;

                var posX = e.offsetX;
                var posY = e.offsetY;
                // console.log(posX, posY);  //按下的位置

                // 将posX  posY -> 存储到dragEle中
                this.posX = posX;
                this.posY = posY;

                console.log(this);
            }


        },
        dragMove: function () {
            // 开始移动 -> 目标匀速跟随鼠标移动  在文档(可变)中移动
            document.onmousemove = function (e) {
                var e = e || window.event;

                var x = e.pageX - posX;
                var y = e.pageY - posY;

                shadow.style.left = x + "px";
                shadow.style.top = y + "px";
            }

        },
        dragEnd: function () { },
    }


    dragEle.dragStart();   // this-> dragEle
    // dragEle.dragMove();










</script>

</html>